<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时监测场景组态</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <!--全局css-->
    <link rel="stylesheet" href="../../../style.css">
    <style>
        .slider {
            width: 42px;
            height: 42px;
            cursor: pointer;
            position: absolute;
        }

        .paramSpan {
            font-size: 18px;
            cursor: pointer;
        }

        .img {
            width: 42px;
            height: 42px;
        }

        .devSpan {
            top: 40px;
            position: relative;
            white-space: nowrap;
            color: blue;
        }

        .chart-outer {
            height: 200px;
        }

        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }

        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }

        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }

        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }

        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }

        .panel-f:last-child {
            margin-right: -5px;
        }

        .chart-outer {
            height: 300px;
        }

        .deviceInfo {
            height: 300px;
        }

        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }

        li {
            list-style-type: none;
        }

        .paramDiv {
            width: 100%;
            background: #fff;
            height: auto;
        }

        el-col {
            position: absolute;
        }
    </style>

</head>
<body>

<div class="page" id="page-vue">
    <div class="">
        <el-row>
            <el-col :span="width.location1">
                <h5 style="text-align: center">场景列表</h5>
                <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#ecf8ff">
                    <template v-if="sceneList">
                        <el-menu-item v-for="(item, index) in sceneList" :index="index">
                            <i class="el-icon-document"></i>
                            <span slot="title">{{item.SceneName}}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
            <el-col :span="width.location2">
                <h5 style="text-align: center">风险检测点</h5>
                <el-tree
                        :data="devTree"
                        show-checkbox
                        node-key="riskNo"
                        default-expand-all
                        :default-checked-keys="checkData"
                        check-strictly="true"
                        ref="tree"
                        @check-change="handleCheck"
                        :props="defaultProps"
                style="overflow: scroll">
                </el-tree>
            </el-col>
            <el-col :span="width.location3" style="overflow: hidden">
                <el-tooltip effect="dark" content="点击缩放" v-model="tooltip" placement="right">
                    <el-button class="icon iconfont icon-full" circle @click="changeFull"></el-button>
                </el-tooltip>
                <el-button style="left: 85%;position: relative" type="success" :disabled="SceneID==null?true:false"
                           @click="saveBtn()">确认修改
                </el-button>
                <div id="contain" style="width:auto;overflow: scroll">
                    <div id="box" style="background-repeat:no-repeat;">
                    </div>
                </div>

            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    let vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            proNo: '',
            sceneList: [],
            img: {
                'Electric': '../../../imgs/electric.png',
                'Water': '../../../imgs/water.png',
            },
            defaultProps: {
                label: 'riskName',
                id: 'riskNo',
            },
            devTree: [], //树形数据
            checkData: [], //选中数据
            proData: [],//树形之前数据。 便于筛选,
            SceneID: null,
            width:{
                location1:5,
                location2:4,
                location3:15,
            },
            isFull:false,
            tooltip:false,
        },
        methods: {
            userNode(data) {

            },
            changeFull(){
               this.isFull = !this.isFull;
               if (this.isFull){
                   this.width={
                       location1:0,
                       location2:0,
                       location3:24,
                   }
               } else {
                   this.width={
                       location1:5,
                       location2:4,
                       location3:15,
                   }
               }
            },
            saveBtn() {
                let doms = $("#box div");
                let tagIds = [], topLefts = [];
                let devIds = [], tagPoint = [], fields = [];
                for (let i = 0; i < doms.length; i++) {

                    tagIds.push(doms[i].id);
                    topLefts.push(doms[i].offsetLeft + ',' + doms[i].offsetTop);

                }


                HttpUtil.get('ScadaDevice/Add', {
                    SceneID: this.SceneID,
                    DeviceID: tagIds.join('|'),
                    TopLefts: topLefts.join('|'),
                    pointType: 0
                }).success((res) => {
                    this.getDevList();
                });

            },
            getScene() {
                HttpUtil.get('ScadaScene/List', {projectNo: this.proNo}).success((res) => {
                    this.sceneList = res.data;
                })
            },
            getProTree() {
                HttpUtil.get('Risk/List', {projectNo: this.proNo,pagesize:100}).success((res) => {
                    this.proData = res.data;
                    this.devTree = res.data;
                })
            },
            handleCheck(data, checked) {
                if (!checked) {
                    $('#' + data.riskNo).remove();
                } else {
                    let elemt = $("#box div");
                    for (let i = 0; i < elemt.length; i++) {
                        if (elemt[i].id == data.riskNo) {
                            return;
                        }
                    }
                    $('#box').append('<div  id= ' + data.riskNo + ' class="slider" type="dev" title=' + data.riskName + '><span class="devSpan">' + data.riskName + '</span></div>');
                    this.dragInit(data.riskNo, 0, 0, 0);
                }
            },
            handleSelect(key) {
                this.setBoxImg(key);
                this.checkData = [];
                this.SceneID = this.sceneList[key].SceneID;
                this.$refs.tree.setCheckedKeys([]);
                this.getDevList();
            },
            getDevList() {
                $('#box').empty();
                HttpUtil.get('ScadaDevice/List', {SceneID: this.SceneID, pointType: 0}).success((res) => {
                    for (let item of res.data) {
                        $('#box').append('<div  id= ' + item.DeviceID + '  class="slider" type="dev" title=' + item.DeviceName + '><span class="devSpan">' + item.DeviceName + '</span></div>');
                        this.dragInit(item.DeviceID, item.pointType, item.Top, item.Left1)
                        for (let temp of this.proData) {
                            if (item.DeviceID == temp.riskNo) {
                                this.checkData.push(temp.riskNo);
                                this.$refs.tree.setCheckedKeys(this.checkData);
                            }
                        }
                    }
                });
            },
            //图片背景
            setBoxImg(index) {
                $("#box").css("background-image", "url('')");
                // 根据索引 设置 不同场景的 不同背景图
                if (this.sceneList[index].ImageName != null) {
                    let img = new Image();
                    img.src = 'http://iot.hzcando.com:10004' + this.sceneList[index].ImageName;
                    if (img.complete) {
                        let style = {
                            position: "relative",
                            width: img.width + "px",
                            height: img.height + "px",
                            top: "10px",
                            left: "10px",
                        }
                        for (let key in style) {
                            document.getElementById('box').style[key] = style[key];
                        }
                        document.getElementById('contain').style.height = img.height * 1.2 + 'px';
                        $("#box").css("background-image", "url(" + img.src + ")");
                    } else {
                        img.onload = function () {
                            let style = {
                                position: "relative",
                                width: img.width + "px",
                                height: img.height + "px",
                                top: "10px",
                                left: "10px",
                            }
                            for (let key in style) {
                                document.getElementById('box').style[key] = style[key];
                            }
                            document.getElementById('contain').style.height = img.height * 1.2 + 'px';
                            $("#box").css("background-image", "url(" + img.src + ")");
                            img.onload = null;//避免重复加载
                        }
                    }
                }
            },
            // 标点
            dragInit: function (id, pointType, m, n) {
                var $box = document.getElementById('box');
                var $div = document.getElementById(id);

                if (m == 0 && n == 0) {
                    var style = {
                        position: "absolute",
                        top: "0" + 'px',
                        left: "0" + 'px',
                        background: "url(../../../imgs/marker-alarm0.png)",
                    }
                } else {
                    var style = {
                        position: "absolute",
                        top: m + 'px',
                        left: n + 'px',
                        background: "url(../../../imgs/marker-alarm0.png)",
                    }

                }

                for (var k in style) {
                    $div.style[k] = style[k];
                }
                $div.onmousedown = function (e) { //鼠标按下位置；
                    e = e || window.event;
                    var x = e.clientX - $div.offsetLeft;
                    var y = e.clientY - $div.offsetTop;
                    document.onmousemove = function (e) { //鼠标按下后移动位置；
                        e = e || window.event;
                        var L = e.clientX - x;
                        var T = e.clientY - y;
                        //var pW = document.documentElement.clientWidth;//页面宽度；
                        //var pH = document.documentElement.clientHeight;
                        var boxW = $box.offsetWidth;
                        var boxH = $box.offsetHeight;
                        var divW = $div.offsetWidth; //div的宽；
                        var divH = $div.offsetHeight;
                        //范围限制
                        if (L < 0) {
                            L = 0;
                        }
                        if (T < 0) {
                            T = 0;
                        }
                        //if(L > pW - divW){L = pW - divW;}
                        //if(T > pH - divH){T = pH - divH;}
                        if (L > boxW - divW) {
                            L = boxW - divW;
                        }
                        if (T > boxH - divH) {
                            T = boxH - divH;
                        }
                        $div.style.left = L + "px";
                        $div.style.top = T + "px";
                    }
                    document.onmouseup = function (e) {
                        document.onmousemove = null; //如果不取消，鼠标弹起div依旧会随着鼠标移动
                        document.onmouseup = null;
                    }
                }

                return $div;
            },
        },
        created: function () {
            $('.page').show();
        },
        mounted: function () {
            this.proNo = SiteConfig.account.projectNo;
            this.getScene();
            this.getProTree();
        }
    });


</script>

</body>
</html>
